{% extends 'wancake/base_nav_frame.html' %}
{% load staticfiles %}
{% block content %}
  <div id="wb-orderrecord-content">
    <div class="row panel panel-default">
      <div class="panel-heading">
        <h4 class="wb-panel-wigdet">订购记录</h4>
        <div class="wb-panel-wigdet-right input-group col-sm-offset-3 col-sm-6 col-md-offset-3 col-md-6">
          <input type="text" class="form-control" placeholder="请输入要查找的">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default">查找</button>
          </span>
        </div>
        <div class="clearfix"></div>
      </div>
      <table class="table table-striped table-hover" id="wb-order-record-list">
      </table>
      <div class="panel-footer" id="wb-order-record-pager">
      </div>
    </div>
  </div>
{% endblock %}
{% block jsscript %}
  <script type="text/javascript">
    $(document).ready(function(e) {
      var orderRecordTable = $("#wb-order-record-list").table({
        columnKeys : ["user_id", "user_bid", "product_name", "date_added", "state", "date_off", "platform"]
        , columnNames : ["用户名", "业务号", "产品名称", "订购日期", "状态", "退订日期", "平台"]
        , columnBody : function(key, value, data) {
          switch (key) {
            case "date_added":
            case "date_off":
              return value || "--";
            case "state":
              return value == 0 ? "已订" : "退订";
            case "platform":
              if (value == 2) {
                return "标清";
              } else {
                return "高清";
              }
            default:
              return value;
          }
        }
      });

      var loadTableData = function(table, url, pageNumber, callback, errorCallback) {
        $.ajax(url, {
          data : {
            pagenum : pageNumber
            , pagesize : 15
            , session : "{{ session_id }}"
          }
          , type : "GET"
          , dataType : "json"
          , success : function(data) {
            var resultData = $.wUtils.getData(data);
            var tableList = resultData.list;
            if (tableList && tableList.length) {
              table.load(tableList);
            }
            if ($.isFunction(callback)) {
              callback.apply(this || window, [resultData.currentPage, resultData.totalPage])
            }
          }
          , error : function() {
            if ($.isFunction(errorCallback)) {
              errorCallback.apply(this || window, []);
            }
          }
        })
      };

      loadTableData(orderRecordTable, "./getorderhistory", 1,
          function(currentPage, totalPageSize) {
            $("#wb-order-record-pager").pager({
                showCount : 7
                , total : totalPageSize
              }).onSelectPage(function(pageNumber) {
                loadTableData(orderRecordTable, "./getorderhistory", pageNumber)
              });
          });

{#      $.ajax("./getorderhistory", {#}
{#        data : {#}
{#          pagenum: 1#}
{#          , pagesize: 15#}
{#          , session: "{{ session_id }}"#}
{#        }#}
{#        , type : "GET"#}
{#        , dataType : "json"#}
{#        , success : function(data) {#}
{#          var resultData = $.wutils.getData(data);#}
{#          var orderList = resultData.list;#}
{#          if (orderList && orderList.length) {#}
{#            orderRecordTable.load(orderList);#}
{#            var totalPageSize = resultData.totalPage;#}
{#            $("#wb-order-record-pager").pager({#}
{#              showCount : 7#}
{#              , total : totalPageSize#}
{#            }).onSelectPage(function(pageNumber) {#}
{#              $.ajax("./getorderhistory", {#}
{#                data : {#}
{#                  pagenum : pageNumber#}
{#                  , pagesize : 15#}
{#                  , session : "{{ session_id }}"#}
{#                }#}
{#                , type : "GET"#}
{#                , dataType : "json"#}
{#                , success : function(data) {#}
{#                  var resultData = $.wutils.getData(data);#}
{#                  var orderList = resultData.list;#}
{#                  if (orderList && orderList.length) {#}
{#                    orderRecordTable.load(orderList);#}
{#                  }#}
{#                }#}
{#                , error : function() {}#}
{#              });#}
{#            });#}
{#          }#}
{#        }#}
{#        , error : function() {}#}
{#      });#}
    });
  </script>
{% endblock %}